<script setup lang="ts">
import { ref } from 'vue';
import { NButton, NInput, NCard } from 'naive-ui';

// 获取 NButton 的 props 类型


// 定义布局项的类型
interface LayoutItem {
  type: string; // 组件类型，如 'NButton', 'NInput'
  props?: Record<string, any>; // 组件的 props 属性
  content?: string; // 插槽内容
  events?: Record<string, Function>; // 事件绑定（如 'click' 等）
  model?: any; // 用于双向绑定的值
  children?: LayoutItem[]; // 子组件
}

// 模拟的布局数据
const layout = ref<LayoutItem[]>([
  {
    type: NButton,
    props: { type: "primary" },
    content: 'Default',
    events: {
      click: ()=>{
        // 调用函数生成 .vue 文件内容
        const vueFileContent = generateVueFile(layout.value);
        console.log(vueFileContent);
        console.log('buttonProps',NButton)
      },
    }
  },
  {
    type: NInput,
    props: { placeholder: '请输入内容' },
    model: ref(''), // 双向绑定
    events: {
      updateValue:(newValue)=>{
        console.log("输入框值更新为：", newValue)
      }
    }
  },
  {
    type: NCard,
    props: { title: '卡片标题' },
    children: [
      {
        type: NButton,
        props: { type: "error" },
        content: '卡片内按钮',
        events: {
          click: ()=>{
            alert("卡片内按钮点击了！")
          },
        }
      }
    ]
  }
]);

// 生成 .vue 文件内容的函数
function generateVueFile(layout: LayoutItem[]): string {
  const generateComponent = (component: LayoutItem): string => {
    // 生成组件的属性绑定
    const props = Object.keys(component.props || {}).map(key => {
      return `:${key}="${JSON.stringify(component.props![key])}"`;
    }).join(' ');

    // 生成事件绑定
    const events = Object.keys(component.events || {}).map(event => {
      return `@${event}="${component.events![event]}"`;
    }).join(' ');

    // 生成插槽内容
    const content = component.content ? `${component.content}` : '';

    // 生成子组件（递归）
    const children = component.children ? component.children.map(child => generateComponent(child)).join('') : '';

    return `<${component.type} ${props} ${events}>${content}${children}</${component.type}>`;
  };

  // 生成模板部分
  const templateContent = layout.map(component => generateComponent(component)).join('\n');

  // 生成完整的 .vue 文件内容
  return `
<template>
 ${templateContent}
</template>
`.replace(/`/g, '\\`').replace(/\$/g, '\\$'); // 转义反引号和美元符号
}


// 打印生成的 .vue 文件内容

</script>

<template>
  <div>
    <!-- 动态渲染组件 -->
    <component
        v-for="(item, index) in layout"
        :is="item.type"
        :key="index"
        v-bind="item.props"
        v-model:value="item.model"
        v-on="item.events"
    >
      <!-- 如果有插槽内容，渲染它 -->
      <template v-if="item.content">
        {{ item.content }}
      </template>

      <!-- 渲染子组件 -->
      <template v-if="item.children">
        <component
            v-for="(child, childIndex) in item.children"
            :is="child.type"
            :key="childIndex"
            v-bind="child.props"
            v-on="child.events"
        >
          <template v-if="child.content">
            {{ child.content }}
          </template>
        </component>
      </template>
    </component>
  </div>
</template>

<style scoped>
/* 样式 */
</style>
